<!--销售明细-->
<template>
  <div class="sales-detail">
    <div class="page-header">
      <h2>销售明细</h2>
      <div class="header-actions">
        <i class="action-icon icon-hierarchy"></i>
        <i class="action-icon icon-bell"><sup>0</sup></i>
        <i class="action-icon icon-question"></i>
        <i class="action-icon icon-user"></i>
      </div>
    </div>

    <div class="content-area">
      <div class="controls-bar">
        <div class="filters">
          <div class="filter-item">
            <label>关键词</label>
            <input v-model="query.keyword" type="text" placeholder="请输入销售单号">
          </div>
          <div class="filter-item">
            <label>产品名称</label>
            <input v-model="query.productName" type="text" placeholder="请输入产品名称">
          </div>
          <div class="filter-item">
            <label>订单状态</label>
            <select v-model="query.orderStatus">
              <option :value="null">全部</option>
              <option :value="0">已发货</option>
              <option :value="1">已完成</option>
              <option :value="2">部分发货</option>
              <option :value="3">待发货</option>
            </select>
          </div>
        </div>
        <div class="actions">
          <button class="btn btn-search" type="button" @click="fetchPage">搜索</button>
          <button class="btn btn-reset" type="button" @click="resetFilters">重置</button>
        </div>
      </div>

      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
                            <th><input type="checkbox" v-model="allSelected"></th>
              <th>销售单号</th>
              <th>订单状态</th>
              <th>下单产品</th>
              <th>规格</th>
              <th>分类</th>
              <th>单位</th>
              <th>下单数量</th>
              <th>单价</th>
              <th>单项合计金额</th>
              <th>下单时间</th>
              <th>期望发货时间</th>
              <th>实际发货时间</th>
              <th>待发货数量</th>
              <th>已发货数量</th>
              <th>已签收数量</th>
              <th>已退货数量</th>
              <th>订单总额</th>
              <th>应收总额</th>
              <th>已退总额</th>
              <th>备注</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in details" :key="index">
              <td><input type="checkbox" v-model="item.selected"></td>
              <td class="order-number">{{ item.orderNo }}</td>
              <td>{{ renderStatus(item.orderStatus) }}</td>
              <td class="product-name">{{ item.productName || '-' }} <span class="product-code">{{ item.productCode || '' }}</span></td>
              <td>{{ item.specification || '-' }}</td>
              <td>{{ item.categoryName || '-' }}</td>
              <td>{{ item.unitName || '-' }}</td>
              <td>{{ item.productCount }}</td>
              <td>{{ formatNumber(item.salePrice) }}</td>
              <td>{{ formatNumber(item.orderAmount) }}</td>
              <td>{{ formatDate(item.orderDate) }}</td>
              <td>{{ formatDate(item.expectedDeliveryDate) }}</td>
              <td>{{ formatDate(item.actualDeliveryDate) }}</td>
              <td>{{ item.pendingDelivery }}</td>
              <td>{{ item.shippedQuantity }}</td>
              <td>{{ item.signedQuantity || 0 }}</td>
              <td>{{ item.returnedQuantity || 0 }}</td>
              <td>{{ formatNumber(item.orderAmount) }}</td>
              <td>{{ formatNumber(item.receivables) }}</td>
              <td>{{ formatNumber(item.refundedTotal) }}</td>
              <td>{{ item.remark || '-' }}</td>
            </tr>
          </tbody>
        </table>
        <div class="table-footer">
           <div class="footer-actions">
                          <input type="checkbox" id="select-all-footer" v-model="allSelected">
             <label for="select-all-footer">全选</label>
             <button class="btn btn-export">导出</button>
           </div>
           <div class="pagination">
             <button @click="prevPage">&lt;</button>
             <button v-for="p in pagesToShow" :key="p" :class="{ active: p === query.pageNum }" @click="changePage(p)">{{ p }}</button>
             <button @click="nextPage">&gt;</button>
             <select v-model.number="query.pageSize" @change="changePageSize">
               <option :value="10">10条/页</option>
               <option :value="20">20条/页</option>
               <option :value="50">50条/页</option>
             </select>
           </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SalesDetail',
  data() {
    return {
      query: { keyword: '', productName: '', orderStatus: null, pageNum: 1, pageSize: 10 },
      details: [],
      total: 0
    }
  },
  created() { this.fetchPage() },
  computed: {
    allSelected: {
      get() {
        return this.details.length > 0 && this.details.every(item => item.selected);
      },
      set(value) {
        this.details.forEach(item => {
          item.selected = value;
        });
      }
    },
    maxPage() { return Math.max(1, Math.ceil(this.total / (this.query.pageSize || 10))) },
    pagesToShow() {
      const pages = []
      const max = this.maxPage
      const cur = this.query.pageNum
      const start = Math.max(1, cur - 2)
      const end = Math.min(max, start + 4)
      for (let i = start; i <= end; i++) pages.push(i)
      return pages
    }
  }
  ,methods: {
    renderStatus(s) { const map = { 0: '已发货', 1: '已完成', 2: '部分发货', 3: '待发货' }; return map[s] || '-' },
    formatDate(v) { if (!v) return ''; const d = new Date(v); if (Number.isNaN(d.getTime())) return ''; const y=d.getFullYear(), m=String(d.getMonth()+1).padStart(2,'0'), day=String(d.getDate()).padStart(2,'0'); return `${y}-${m}-${day}` },
    formatNumber(n) { if (n===null||n===undefined) return 0; const num=Number(n); if (Number.isNaN(num)) return 0; return num.toLocaleString(undefined,{ minimumFractionDigits:2, maximumFractionDigits:2 }) },
    async fetchPage() {
      const { pageSalesOrders } = await import('@/api/sale/SalesOrders')
      const res = await pageSalesOrders(this.query)
      const payload = res?.data?.data || {}
      this.details = (payload.records || []).map(it => ({ ...it, selected: false }))
      this.total = Number(payload.total || 0)
      if (payload.current) this.query.pageNum = Number(payload.current)
      if (payload.size) this.query.pageSize = Number(payload.size)
    },
    changePage(p) { if (p === this.query.pageNum) return; this.query.pageNum = p; this.fetchPage() },
    prevPage() { if (this.query.pageNum <= 1) return; this.query.pageNum -= 1; this.fetchPage() },
    nextPage() { const max = this.maxPage; if (this.query.pageNum >= max) return; this.query.pageNum += 1; this.fetchPage() },
    changePageSize() { this.query.pageNum = 1; this.fetchPage() },
    resetFilters() { this.query = { keyword: '', productName: '', orderStatus: null, pageNum: 1, pageSize: this.query.pageSize || 10 }; this.fetchPage() }
  }
}
</script>

<style scoped>
.sales-detail { background-color: #f7f8fa; padding: 20px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-header h2 { font-size: 20px; color: #333; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.action-icon { font-size: 18px; color: #666; cursor: pointer; position: relative; }
.icon-bell sup { position: absolute; top: -5px; right: -10px; background: red; color: white; border-radius: 50%; padding: 2px 5px; font-size: 10px; }
.content-area { background: white; padding: 20px; border-radius: 8px; }
.controls-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 15px; }
.btn { border: 1px solid #dcdfe6; background: white; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
.filters { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.filter-item { display: flex; align-items: center; gap: 5px; }
.filter-item label { color: #666; font-size: 14px; }
.filter-item input { border: 1px solid #dcdfe6; padding: 8px; border-radius: 4px; width: 260px; }
.actions { display: flex; gap: 10px; }
.btn-search { background: #409eff; color: white; border-color: #409eff; }
.table-container { border: 1px solid #ebeef5; border-radius: 4px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ebeef5; }
.data-table th { background: #fafafa; color: #606266; font-weight: 500; }
.data-table td { color: #606266; }
.order-number, .product-name { color: #409eff; cursor: pointer; }
.product-name .product-code { color: #909399; margin-left: 5px; }
.status-pending { color: #67c23a; }
.status-partial { color: #e6a23c; }
.status-shipped { color: #f56c6c; }
.status-completed { color: #909399; }
.table-footer { display: flex; justify-content: space-between; align-items: center; padding: 15px; }
.footer-actions { display: flex; align-items: center; gap: 10px; }
.btn-export { border: 1px solid #dcdfe6; background: white; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
.pagination { display: flex; align-items: center; gap: 5px; }
.pagination button { border: 1px solid #dcdfe6; background: white; padding: 5px 10px; cursor: pointer; }
.pagination button.active { background: #409eff; color: white; border-color: #409eff; }
</style>
